<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="goodHao" label="商品序列号"  />
    <el-table-column property="goodName" label="商品名称"/>
    <el-table-column property="zhuangTai" label="商品状态"/>
    <el-table-column property="gongYing" label="供应商"/>
    <el-table-column property="kuCun" label="库存"/>
    <el-table-column property="xiaoPrice" label="销售价格"/>
    <el-table-column property="yunFei" label="运费"/>
    <el-table-column property="goodTime" label="活动时间"/>
    <el-table-column property="goodWay" label="支付方式"/>
    <el-table-column label="操作" width= '250'>
      <template #default>
  <el-button plain round=true>修改</el-button>
  <el-button plain round=true>删除</el-button>
  <el-button plain round=true>确定</el-button>
      </template>
    </el-table-column>


  </el-table>

</template>


<script>
import { ref,onMounted } from 'vue';
import dataMore from '@/mock4/index.js'
import mitt from '@/mock1/mitt.js'

export default {
  setup() {
const tableData = ref([]);
const value = ref('全部');
const input1 = ref('');
const input2 = ref('');


const handleSelectionChange = (val) => {
console.log(val);
}

onMounted(()=>{
sbb();
})
const sbb =async()=>{
 const res = await dataMore.getData(
  {value}
 );
 if(res.status === 0){
  tableData.value = res.list
 }
}

mitt.on('msg',(res)=>{
    input1.value = res.input1;
    input2.value = res.input2;
    if(input1.value !== ''){
       const ree  =  tableData.value.filter(el=>el.goodHao === input1.value)
         tableData.value = ree
    }else if(input2.value !== ''){
      const ree  =  tableData.value.filter(el=>el.goodName === input2.value)
         tableData.value = ree
    }
})
mitt.on('mmg',(res)=>{
     console.log("value",res);
     value.value = res.value;
     sbb({value})
})

mitt.on('mss',(res)=>{
  tableData.value.unshift({
    "goodHao":res.a,
    "goodName":res.b,
    "yunFei":res.c,
    "gongYing":res.d
    })
})

return {handleSelectionChange,tableData }

  },
}
</script>

